@charset "utf-8";

@import "./reset.scss";

@function getvw($w){
    @return ($w / 750) * 100 + vw
}

.wrap{
    width: getvw(750);
    position: relative;
    .header{
        width: getvw(750);
        ul{
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            margin: getvw(17) getvw(23) getvw(10) getvw(23);
            img{
                width: getvw(123);
                height: getvw(123);
            }
            // 设置搜索框
            input{
                width: getvw(226);
                height: getvw(51);
                border-color: orange;
                border-radius: 15px;
                font-size: getvw(24);
            }
            // iconfont发大镜图标
            .glass{
                font-size: getvw(30);
                color: orange;
                position: absolute;
                top: getvw(50);
                right: getvw(260);
            }
            // 设置选择框
            select{
                width: getvw(159);
                height: getvw(56);
                border-color: orange;
                // appearance: none;这个属性设置选择框右边的小箭头消失
                appearance: none; 
                position: relative;
                font-size: getvw(25);
            }
        }
        // 利用after或before设置三角形图标代替原有的小箭头
        &::after{
            content: '';
            width: 0px;
            height: 0px;
            position: absolute;
            top: getvw(55);
            right: getvw(30);
            border-style: solid;
            border-width: getvw(16);
            border-color: orange transparent transparent transparent;
        }
    }
    
    .main{
        width: getvw(750);
        // margin-bottom是为了让底部导航栏滑到底部时不遮挡内容
        margin-bottom: getvw(140);
        .imgBox{
            width: getvw(750);
            overflow: hidden;
            margin-bottom: getvw(35);
            .picture{
                width: getvw(2250);
                display: flex;
                animation: move 6s ease infinite normal;
                // 设置轮播图，因为三张宽都是getvw（750），所以开始的translateX设置getvw（-1500）
                @keyframes move {
                    from{
                        transform: translateX(getvw(-1500));
                    }
                    to{
                        transform: translateX(getvw(0));
                    }
                }
                img{
                    width: getvw(750);
                }
            }
        }
        .discount{
            width: getvw(708);
            height: getvw(291);
            margin: 0 getvw(21);
            position: relative;
            margin-bottom: getvw(35);
            .star{
                font-size: getvw(54);
                color: orange
            }
            .arrow{
                font-size: getvw(25);
                color: orange;
                position: absolute;
                right: getvw(0);
                top: getvw(19);
            }
            .heart{
                font-size: getvw(49);
                color: orange;
            }
            .text{
                width: getvw(611);
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                position: absolute;
                top: getvw(12);
                left: getvw(64);
                p:first-child{
                    font-size: getvw(30);
                }
                p:last-child{
                    font-size: getvw(24);
                }
            }
            .activity{
                width: getvw(585);
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                position: absolute;
                top: getvw(69);
                left: getvw(57);
                img{
                    width: getvw(241);
                    height: getvw(94);
                    margin-bottom: getvw(29);
                }
            }
        }
        .like{
            width: getvw(708);
            margin: 0 getvw(21);
            position: relative;
            margin-bottom: getvw(35);
            .arrow{
                font-size: getvw(25);
                color: orange;
                position: absolute;
                right: getvw(0);
                top: getvw(19);
            }
            .heart{
                font-size: getvw(49);
                color: orange;
            }
            .text{
                width: getvw(611);
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                position: absolute;
                top: getvw(12);
                left: getvw(64);
                p:first-child{
                    font-size: getvw(29);
                }
                p:last-child{
                    font-size: getvw(24);
                }
            }
            .shop{
                width: getvw(717);
                margin: getvw(30) 0px;
                display: flex;
                justify-content: space-around;
                img{
                    width: getvw(211);
                    height: getvw(164);
                }
                .message{
                    width: getvw(484);
                    height: getvw(164);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                    p{
                        font-size: getvw(23);
                        color: gray;
                    }
                    .title{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        p:first-child{
                            font-size: getvw(30);
                            color: black;
                            a{
                                color: black;
                                text-decoration: none;
                            }
                        }
                        p:last-child{
                            font-size: getvw(18);
                        }
                    }
                    .data{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        p:first-child{
                            font-size: getvw(26);
                            color: orange;
                        }
                        p:last-child{
                            font-size: getvw(22);
                        }
                    }
                }
            }
        }
    }
    
    .bottom{
        width: getvw(750);
        position: fixed;
        bottom: 0px;
        background-color: white;
        ul{
            display: flex;
            justify-content: space-around;
            li{
                text-align: center;
                a{
                    text-decoration: none;
                }
                i{
                    font-size: getvw(73);
                    color: orange;
                }
                p{
                    font-size: getvw(26);
                    color: black;
                }
            }
        }
    }
}

